<template>
  <div class='order-container'>
    <div class="container-top">
      <el-card>
        <template #header>
          <span style="height: 20px ; line-height: 20px;">请选择日期 <span style="color: red; font-size: 12px; ">(默认显示当天售卖商品)</span></span>
        </template>
        <el-row >
          <el-col :span="12" :offset="8" >
            <el-date-picker
                v-model="dateValue"
                type="daterange"
                start-placeholder="请选择开始时间"
                end-placeholder="请选择结束时间"
                @change="dateChange"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="container-middle">
      <div v-if="orderList != undefined && orderList.length === 0" class="container-middle-title">
        <span >当天尚未售卖商品</span>
      </div>
      <div v-else>
        <el-table stripe border :data="orderList" height="490" >
          <el-table-column prop="id" label="订单号" min-width="130"></el-table-column>
          <el-table-column prop="goods_name" label="商品名称" width="150">
            <template #default="scope">
              {{scope.row.goods_name.length> 10? scope.row.goods_name.substring(0, 10) + '...' : scope.row.goods_name}}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="订单状态" min-width="90">
            <template #default="scope">
              <el-tag v-if="scope.row.status === 0" type="success">零售</el-tag>
              <el-tag v-else-if="scope.row.status === 1" type="danger">网络</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sell_count" label="订单数量" min-width="90"></el-table-column>
          <el-table-column prop="money" label="订单金额" min-width="90">
            <template #default="scope">
              {{scope.row.money / 100}} 元
            </template>
          </el-table-column>
          <el-table-column prop="time" label="订单时间" min-width="180">
            <template #default="scope">
              {{timestempToDateString(scope.row.time)}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" >
            <template #default="scope">
              <el-button size="small" type="primary" @click="orderInfo(scope.row)"> 详情</el-button>
              <el-button size="small" type="danger" @click="orderDelete(scope.row)"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-drawer v-model="drawer" title="请确认订单详情" :with-header="false">
          <div class="drawer-container">
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span>订单详情</span>
                </div>
              </template>
              <el-row class="drawer-container-row">
                <el-col :span="5">
                  <div>商品名称</div>
                </el-col>
                <el-col :span="18" :offset="1">
                  <div>{{order.goods_name}}</div>
                </el-col>

              </el-row>
              <el-row class="drawer-container-row">
                <el-col :span="5">
                  <div>售卖数量</div>
                </el-col>
                <el-col :span="18" :offset="1">
                  <div :style="{color:order.sell_count == undefined ? 'red' : 'green'}">{{order.sell_count == undefined ? 0 : order.sell_count}}</div>
                </el-col>
              </el-row>
              <el-row class="drawer-container-row">
                <el-col :span="5">
                  <div>售卖价格</div>
                </el-col>
                <el-col :span="18" :offset="1">
                  <span>{{order.money / 100}} 元</span>
                </el-col>
              </el-row>
              <el-row class="drawer-container-row">
                <el-col :span="5">
                  <div>售卖方式</div>
                </el-col>
                <el-col :span="18" :offset="1">
                  <span>{{order.status == 0 ? '零售' : '网络'}}</span>
                </el-col>
              </el-row>
              <el-row class="drawer-container-row" >
                <el-col :span="5">
                  <div>手机号</div>
                </el-col>
                <el-col :span="18" :offset="1">
                  <span>{{order.phone}}</span>
                </el-col>
              </el-row>
              <el-row class="drawer-container-row" >
                <el-col :span="5">
                  <div>地址</div>
                </el-col>
                <el-col :span="18" :offset="1">
                  <span>{{order.address}}</span>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-drawer>

      </div>
    </div>
    <div class="container-bottom">
    <!--  1. 显示当天的售卖价格-->
    <!--  2. 显示当天的售卖的成本价格-->
      <el-collapse accordion v-model="activeItem">
        <el-collapse-item name="1" >
          <el-row>
            <el-col :span="6" :offset="2">当前成本 : {{cost}}</el-col>
            <el-col :span="6" :offset="2">当前售卖 : {{sell}}</el-col>
            <el-col :span="6" :offset="2">盈利 : {{math.round(sell - cost,2)}}</el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>

  </div>
</template>

<script setup lang="ts">
import { invoke } from '@tauri-apps/api/tauri'
import {onMounted, ref} from 'vue'
import {createId ,timestempToDateString ,showMessage } from '@/util/index'
import * as math from 'mathjs'

let emits = defineEmits(['flush']);
let drawer = ref(false)


const orderInfo= e=>{
  order.value = e;
  drawer.value = true;

}

let activeItem = ref('1');
// 1. 选择时间, 默认当天
let date = new Date();
let currentStartDateTime = new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime().toString();
let currentEndDateTime = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1).getTime().toString();
let dateValue = ref('');

// 2. 显示所选时间段的订单
const dateChange =(e)=>{
  if (e) {
    let startDateTime = new Date(e[0]).getTime().toString();
    let endDateTime = new Date(e[1]).getTime().toString();
    currentStartDateTime = startDateTime ;
    currentEndDateTime = endDateTime ;
    getOrderByCondiction(startDateTime , endDateTime);
    search_order_by_goods(startDateTime, endDateTime);
    emits('flush')
  }else{
    currentStartDateTime = new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime().toString();
    currentEndDateTime = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1).getTime().toString();
    getOrderByCondiction(currentStartDateTime,currentEndDateTime);
    search_order_by_goods(currentStartDateTime, currentEndDateTime);
    emits('flush')
  }

}

// 4. 显示订单详情
// 4.1 订单详情 : 订单号 , 商品id , 商品名称 , 订单数量 ,  订单状态 , 订单金额 , 订单分类 , 订单时间 , 订单电话 , 订单地址 , 订单备注
interface Order{
  id : string ,
  goods_id : string ,
  goods_name : string ,
  sell_count : number ,
  status : number ,
  money : number ,
  time : string ,
  phone : string ,
  address : string
}
let order = ref<Order>();
let orderList = ref<Order[]>();
let cost = ref(0); // 成本
let sell = ref(0); // 售卖

/**
 *  获取当天的订单
 */
const getOrderByCondiction = (startTime,endTime)=>{
  invoke('order_search',{startTime,endTime}).then(res=>{
    if (typeof res === "string") {
      orderList.value = JSON.parse(res);
    }
  })
}


/**
 * 获取指定时间内的订单数据, 进行售卖及成本的核算
 * @param startTime 开始时间
 * @param endTime 线束时间
 */
const search_order_by_goods = (startTime,endTime)=>{
  invoke('search_order_by_goods',{startTime,endTime}).then(res=>{
    let voList;
    if (typeof res === "string") {
      voList = JSON.parse(res);
    }
    sell.value = 0 ;
    cost.value = 0 ;
    voList.forEach(item => {
      //@ts-ignore
      sell.value = math.round(item.money + sell.value , 2)  ;
      // 单个成本
      //@ts-ignore
      let one = math.round((item.price/100 * item.count + item.transport/100) / item.count,2);
      //@ts-ignore
      cost.value = math.round(one * item.sell_count + cost.value , 2);
    });
    //@ts-ignore
    sell.value = math.round(sell.value / 100, 2) ;
    cost.value ;
  })
}

/**
 * 删除订单
 * @param order
 */
const orderDelete = (order)=>{
  // 更新 tb_repo 里面 count 需要用到 order.goods_id 和 order.sell_count   请求为 repo_change 参数为 : (count,id)
  invoke('repo_change',{count:order.sell_count.toString(),id:order.goods_id.toString()}).then(res=>{
    if(res === 1){
      // 删除 tb_order 里面的 id
      invoke('order_del_by_id',{id:order.id.toString()}).then(res=>{
        showMessage(res);
        getOrderByCondiction(currentStartDateTime,currentEndDateTime);
        search_order_by_goods(currentStartDateTime,currentEndDateTime);
        emits('flush')
      })
    }
  })
}
onMounted(()=> {
  getOrderByCondiction(currentStartDateTime,currentEndDateTime);
  search_order_by_goods(currentStartDateTime,currentEndDateTime);
});

</script>

<style scoped lang="scss">
.order-container{
  height: 100%;
  width: 100%;

  .container-top{
    height: 133px;

  }
  .container-middle{
    height: 480px;
    .container-middle-title{
      height: 485px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
    }
  }
  .container-bottom{
    height: 90px;
    ::v-deep(.el-col){
      font-size: 18px;
    }
  }
}

</style>